<template>
    <van-popup v-model="show" position="top" :style="style" @open="openBox()" @close="closeBox()">
        <div>
            <div class="popup-title">请先注册/选择手机</div>
        </div>
        <div>
            <van-field label-width="60px" placeholder="请输入手机号" v-model="params.phone" type="number" label="手机号" />
            <van-field
                    v-model="params.code"
                    label-width="60px"
                    type="number"
                    center
                    label="验证码"
                    placeholder="请输入验证码"
            >
                <template #button>
                    <div class="btn-a">
                        <span v-if="!isSend" @click="getCode">发送验证码</span>
                        <span v-else>{{time}}S</span>
                    </div>
                </template>
            </van-field>
        </div>
        <div class="popup-footer">
            <a href="javascript: void (0)" class="default" @click="closeBox">取 消</a>
            <a href="javascript: void (0)" class="submit" @click="login">登 陆</a>
        </div>
    </van-popup>
</template>

<script>
    import {mapGetters,mapMutations} from 'vuex'
    const TIME = 60;
    export default {
        name: "myPopup",
        computed: {...mapGetters(['wxInfo'])},
        model:{
            prop:'topShow',//要存在于proops
            event:'change'//当组件的值发生改变时要emit的事件名
        },
        props: ['topShow'],
        watch: {
            topShow(val){
                this.show = val;
            }
        },
        data(){
            return{
                isSend: false,
                time: TIME,
                show: this.topShow,
                style: {
                    width: '80%',
                    top: '30%',
                    left: '10%',
                    borderRadius: '10px'
                },
                params: {
                    phone: '',
                    code: '',
                }
            }
        },

        methods: {
            ...mapMutations(['SET_WX_INFO','SET_USERINFO']),

            //倒计时
            cuntDown(){
                var interval = setInterval(_ => {
                    if(this.time > 1){
                        this.time --;
                    }else {
                        this.time = TIME;
                        this.isSend = false;
                        clearInterval(interval);
                    }
                },1000);
            },

            //获取验证码
            async getCode(){
                if(!this.params.phone) return this.$toast.error('请输入手机号');
                try {
                    const res = await this.sendPhone(this.params.phone);
                    if(res.errorCode === '00000'){
                        this.isSend = true;
                        this.cuntDown();
                    }else {
                        this.$toast.error('获取验证码失败');
                    }
                }catch (e) {
                    this.$toast.error('获取验证码失败');
                }

            },



            //发送验证码
            async sendPhone(phone) {
                return this.$http.get(`/mp/user/sendSms`, {params: {phone}});
            },


            openBox(){
                this.show = true;
            },
            closeBox(){
                this.show = false;
                this.$emit('change', false);
            },


            async login(){
                if(!this.params.phone) return this.$toast.error('请输入电话号码');
                if(!this.params.code) return this.$toast.error('请输入验证码');
                this.$loading();
                try{
                    const res = await this.$http.post(`/mp/user/phone`,this.params);
                    if(res.errorCode != '00000')return this.$toast.error('绑定手机失败');

                    localStorage.setItem('userinfo',JSON.stringify(res.data));
                    this.SET_USERINFO(res.data);
                    this.closeBox();
                }finally {
                    this.$loading.close();
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .popup-title{
        padding: @padding 0;
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid #F9F9F9;
    }
    .btn-a{
        padding-left: 16px;
        border-left: 1px solid #ddd;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        color: #2878ff;
        span{
            cursor: pointer;
        }
    }
    .popup-footer{
        padding: 10px;
        display: flex;
        a{
            flex: 1;
            display: flex;
            height: 40px;
            line-height: 40px;
            justify-content: center;
            border-radius: 4px;
            &.default{
                background-color: #fff;
                color: #666;
                border: 1px solid @border-color;
            }
            &.submit{
                background-color: @theme-color;
                border: 1px solid @theme-color;
                color: #fff;
                margin-left: 10px;
            }
        }
    }

    .footer-btn{
        flex: 1;
        margin: 0 5px;
    }
</style>
